<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<script src="js/jquery.js"></script>
	<script>
		$(() => {
			/*No cache for css*/
			$('link.cssLink').each((index, element) => {
				let url = $(element).attr('href');
				url += '?rand=' + Math.random();
				$(element).attr('href', url);
			});
			
			/*Auto completion function*/
			$('#searchInput').on('keydown', (e) => {
				let keyword = $(e.target).val();
				let requestData = 'keyword=' + keyword;
				console.log(requestData);
				$.ajax({
					url: 'Search',
					method: 'GET',
					accept: 'application/json',
					data: requestData,
					success: (productList, status) => {
						let dataList = $('#autoCompletion');
						/*Clear the origin datalist*/
						dataList.children().remove();
						productList.forEach((element, index) => {
							/*Max number of auto completion is 10
                            Although this should be done in server*/
							const MAX_NUMBER_OF_COMPLETION = 10;
							if (index < MAX_NUMBER_OF_COMPLETION) {
								dataList.append('<option class="autocomplete-option" value="' + element.name + '">' + element.name + '</option>');
							}
						});
						
					}
				});
			});
			
		});
	</script>
	<link class="cssLink" href="css/jpetstore.css" media="screen"
		  rel="StyleSheet" type="text/css"/>
	<link href="css/icono.min.css" rel="stylesheet" type="text/css">
	<link class="cssLink" href="css/mycss.css" rel="stylesheet" type="text/css">
	<meta content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org"
		  name="generator"/>
	<title>MyPetStore</title>
	<meta charset="UTF-8">
	<meta content="text/html; charset=UTF-8"
		  http-equiv="Content-Type"/>
	<meta content="max-age=0" http-equiv="Cache-Control"/>
	<meta content="no-cache" http-equiv="Cache-Control"/>
	<meta content="0" http-equiv="expires"/>
	<meta content="Tue, 01 Jan 1980 1:00:00 GMT" http-equiv="Expires"/>
	<meta content="no-cache" http-equiv="Pragma"/>
</head>
<body>
<div th:include="common/top.html::top"></div>
<div id="content">
	
	<div id="BackLink"><a href="Product?productID=123" th:href="'Product?productID=' + ${item.product.productID}"
						  th:text="'Return to '+${item.product.productID}">Return to 123</a></div>
	
	<div id="Catalog">
		
		<table>
			<tr>
				<td th:utext="${item.product.description}">Description Picture</td>
			</tr>
			<tr>
				<td><b th:text="${item.itemId}"> </b></td>
			</tr>
			<tr>
				<td><b>
					<font size="4"
						  th:text="
							 ${item.attribute1} + ' ' + ${item.product.name}">
						Attribute
					</font></b></td>
			</tr>
			<tr>
				<td th:text="${item.product.name}"></td>
			</tr>
			
			<tr>
				<td th:if="${item.quantity le 0}" th:text="Out of Stock">
					In Stock
				</td>
			</tr>
			<tr>
				<td th:text="'$'+${item.listPrice}"></td>
			</tr>
			
			<tr>
				<td>
					<a class="Button"
					   href="Cart?method=addItemToCart&itemID=123"
					   th:href="'Cart?method=AddItemToCart&itemID='+${item.itemId}">Add to
						cart</a>
				</td>
			</tr>
		</table>
	
	</div>
</div>
<div th:include="common/bottom.html::bottom"></div>
</body>
</html>
	